<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>概要统计-统计看板</title>
<link rel="stylesheet" type="text/css" href="css/weal.css"/>
<link rel="stylesheet" type="text/css" href="css/active_static.css"/>
</head>

<body>

<div id="wrapper" class="dm-clearfix">
	
	
	<div class="dm-left" id="active_1">
		<!--加盟商统计-->
		<div class="weal-dtlMod" >
			<h5 class="title dm-clearfix">
				<span class="txt">加盟商统计</span>
			</h5>
			<div class="data-info dm-clearfix">
				<dl class="data-1">
					<dt class="bt">加盟商总数</dt>
					<dd class="num">16</dd>
				</dl>
				<dl class="data-2">
					<dt class="bt">代理城市总数</dt>
					<dd class="num">196</dd>
				</dl>
				<dl class="data-3">
					<dt class="bt">门店总数</dt>
					<dd class="num">280</dd>
				</dl>
			</div>
			<div class="weal-info">
				<table class="dm-table tc" border="1" bordercolor="#ddd" cellpadding="0" cellspacing="0">
					<tr>
						<th>省份</th>
						<th>城市数</th>
						<th>加盟商数</th>
						<th>门店数量</th>
						<th>昨日新增加盟商数</th>
						<th>昨日新增门店数</th>
					</tr>
					<tr v-for="(item,index) in businessData">
						<td>{{item.convince}}</td>
						<td>{{item.cityNum}}</td>
						<td>{{item.sellorNum}}</td>
						<td>{{item.storeNum}}</td>
						<td>{{item.addSelNum}}</td>
						<td>{{item.addStoreNum}}</td>
					</tr>
				</table>
			</div>
		</div>
		
		<!--会员统计-->
		<div class="weal-dtlMod" >
			<h5 class="title dm-clearfix">
				<span class="txt">会员统计</span>
			</h5>
			<div class="data-info dm-clearfix">
				<dl class="data-1">
					<dt class="bt">会员总数</dt>
					<dd class="num">16</dd>
				</dl>
				<dl class="data-2">
					<dt class="bt">昨日新增会员</dt>
					<dd class="num">196</dd>
				</dl>
			</div>
			<div class="weal-info dm-clearfix">
				<div class="dm-left vip-info-box">
					<div id="echart-1"></div>
					<h5 class="txt tc">会员占比</h5>
				</div>
				<div class="dm-left vip-info-box">
					<div id="echart-2"></div>
					<h5 class="txt tc">等级会员占比</h5>
				</div>
			</div>
		</div>
	
	</div>
	
	<div class="dm-right" id="active_2">
		<div class="weal-dtlMod" >
			<h5 class="title dm-clearfix">
				<span class="txt">粉丝统计</span>
			</h5>
			<div class="data-info dm-clearfix">
				<dl class="data-1">
					<dt class="bt">粉丝总数</dt>
					<dd class="num">16458</dd>
				</dl>
				<dl class="data-2">
					<dt class="bt">昨日新增粉丝</dt>
					<dd class="num">196</dd>
				</dl>
				<dl class="data-3">
					<dt class="bt">昨日粉丝取关</dt>
					<dd class="num">280</dd>
				</dl>
			</div>
			<div class="weal-info dm-clearfix bottom-line">
				<div class="dm-left vip-info-box">
					<div id="echart-3"></div>
					<h5 class="txt tc">总粉丝来源</h5>
				</div>
				<div class="dm-left vip-info-box">
					<div id="echart-4"></div>
					<h5 class="txt tc">新增粉丝来源</h5>
				</div>
			</div>
			<!--日期选择-->
			<div class="date-selMod dm-clearfix">
				<!--<h5 class="name dm-left">日期选择</h5>-->
				<input type="text" readonly="readonly" class="date tc start" onclick="SelectDate(this,'yyyy-MM-dd')" placeholder="-起始日期-" />
				<h5 class="name dm-left">-</h5>
				<input type="text" readonly="readonly" class="date tc end" onclick="SelectDate(this,'yyyy-MM-dd')" placeholder="-结束日期-" />
				<input type="button" class="btn bg-m" value="查询" />
			</div>
			
			<div id="echart-5"></div>
		</div>
	</div>
	
	<div class="dm-clear"></div>
	
	<div class="weal-dtlMod" style="margin: 0;">
		<h5 class="title bottom-line dm-clearfix">
			<span class="txt">订单统计图</span>
		</h5>
		<!--日期选择-->
		<div class="date-selMod dm-clearfix" style="padding-top: 15px;">
			<!--<h5 class="name dm-left">日期选择</h5>-->
			<input type="text" readonly="readonly" class="date tc start" onclick="SelectDate(this,'yyyy-MM-dd')" placeholder="-起始日期-" />
			<h5 class="name dm-left">-</h5>
			<input type="text" readonly="readonly" class="date tc end" onclick="SelectDate(this,'yyyy-MM-dd')" placeholder="-结束日期-" />
			<div class="sel_box mid-sel dm-left">
				<select>
					<option value="">省份</option>
					<option value="">安徽省</option>
					<option value="">江苏省</option>
				</select>
			</div>
			<input type="text" class="mid-ipt dm-left" placeholder="搜索加盟商" />
			<input type="text" class="mid-ipt dm-left" placeholder="搜索门店" />
			<input type="button" class="btn bg-m" value="查询" />
		</div>
		
		<div id="echart-6"></div>
	</div>
	
</div>

<script src="js/lib/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/vue-2.5.17.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/date.js" type="text/javascript" charset="utf-8"></script>
<script src="js/rate.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script src="data/data.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

var vm = new Vue({
	el:'#wrapper',
	data:{
		businessData:data.business,
	},
	methods:{
		
	},
	mounted:function(){
		loadEchart();
	},
});



function loadEchart(){
	var color = ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'];
	echarts.init($('#echart-1')[0]).setOption({
	    series: [{
	        type: 'pie',
	        radius: '55%',
	        data:[
	            {value:235, name:'普通会员'},
	            {value:274, name:'VIP会员'}
	        ],
	        color:color,
	    }]
	});
	
	echarts.init($('#echart-2')[0]).setOption({
	    series: [{
	        type: 'pie',
	        radius: '55%',
	        data:[
	            {value:235, name:'一级'},
	            {value:274, name:'二级'},
	            {value:274, name:'三级'},
	            {value:274, name:'四级'},
	            {value:274, name:'五级'},
	        ],
	        color:color,
	    }]
	});
	
	echarts.init($('#echart-3')[0]).setOption({
	    series: [{
	        type: 'pie',
	        radius: '55%',
	        data:[
	            {value:235, name:'自动转换'},
	            {value:274, name:'分享推荐'},
	            {value:274, name:'直接访问'}
	        ],
	        color:color,
	    }]
	});
	
	echarts.init($('#echart-4')[0]).setOption({
	    series: [{
	        type: 'pie',
	        radius: '55%',
	        data:[
	            {value:24, name:'自动转换'},
	            {value:256, name:'分享推荐'},
	            {value:123, name:'直接访问'}
	        ],
	        color:color,
	    }]
	});
	
	//粉丝数量
	echarts.init($('#echart-5')[0]).setOption({
	    title: {
	        text: '粉丝数量'
	    },
	    tooltip: {
	        trigger: 'axis'
	    },
	    legend: {
	        data:['新增粉丝','粉丝总数']
	    },
	    grid: {
	        left: '3%',
	        right: '4%',
	        bottom: '3%',
	        containLabel: true
	    },
	    xAxis: {
	        type: 'category',
	        boundaryGap: false,
	        data: ['2018.9.1','2018.9.2','2018.9.3','2018.9.4','2018.9.5','2018.9.6','2018.9.7']
	    },
	    yAxis: {
	        type: 'value'
	    },
	    series: [
	        {
	            name:'新增粉丝',
	            type:'line',
	            stack: '总量',
	            data:[120, 132, 101, 134, 90, 230, 210]
	        },
	        {
	            name:'粉丝总数',
	            type:'line',
	            stack: '总量',
	            data:[220, 182, 191, 234, 290, 330, 310]
	        },
	    ]
	});
	
	
	//订单
	echarts.init($('#echart-6')[0]).setOption({
	    title: {
	        text: '订单数量(线下订单)'
	    },
	    tooltip: {
	        trigger: 'axis'
	    },
	    grid: {
	        left: '3%',
	        right: '4%',
	        bottom: '3%',
	        containLabel: true
	    },
	    xAxis: {
	        type: 'category',
	        boundaryGap: false,
	        data: ['2018.9.1','2018.9.2','2018.9.3','2018.9.4','2018.9.5','2018.9.6','2018.9.7']
	    },
	    yAxis: {
	        type: 'value'
	    },
	    series: [
	        {
	            name:'订单数量',
	            type:'line',
	            stack: '总量',
	            data:[120, 132, 101, 134, 90, 230, 210]
	        }
	    ]
	});
};

</script>

</body>
</html>
